HTML Canvas Graphics

HTML கேன்வாஸ் கிராபிக்ஸைக் கற்றுக்கொள்ளுங்கள்

HTML கேன்வாஸ் கிராபிக்ஸ்

HTML <canvas> உறுப்பு வலைப்பக்கத்தில் கிராபிக்ஸை வரைய பயன்படுகிறது.

கேன்வாஸ் உதாரணம்

மேலே உள்ள கிராபிக்ஸ் <canvas> உடன் உருவாக்கப்பட்டது. இது நான்கு உறுப்புகளைக் காட்டுகிறது: ஒரு சிவப்பு செவ்வகம், ஒரு கிரேடியண்ட் செவ்வகம், ஒரு பலவண்ண செவ்வகம் மற்றும் பலவண்ண உரை.

கேன்வாஸ் என்றால் என்ன?

HTML <canvas> உறுப்பு கிராபிக்ஸை, உடனடியாக, JavaScript மூலம் வரைய பயன்படுகிறது.

🎨 முக்கிய கருத்து:

<canvas> உறுப்பு கிராபிக்ஸிற்கான ஒரு கொள்கலன் மட்டுமே. கிராபிக்ஸை உண்மையில் வரைய நீங்கள் JavaScript பயன்படுத்த வேண்டும்.

பாதைகளை வரைய

கேன்வாஸில் பாதைகள், பெட்டிகள், வட்டங்களை வரைய பல முறைகள் உள்ளன

உரை சேர்க்க

கேன்வாஸில் உரையை வரையவும், வடிவமைக்கவும் முடியும்

படங்களை கேன்வாஸில் சேர்க்கவும், மாற்றியமைக்கவும் முடியும்

கிரேடியண்ட்கள்

நேரியல் மற்றும் வட்ட கிரேடியண்ட்களை உருவாக்கலாம்

🌐 உலாவி ஆதரவு:

கேன்வாஸ் அனைத்து முக்கிய உலாவிகளாலும் ஆதரிக்கப்படுகிறது.

கேன்வாஸ் உதாரணங்கள்

ஒரு கேன்வாஸ் என்பது ஒரு HTML பக்கத்தில் உள்ள ஒரு செவ்வகப் பகுதியாகும். இயல்புநிலையாக, ஒரு கேன்வாஸுக்கு எல்லை இல்லை மற்றும் உள்ளடக்கம் இல்லை.

மார்க்அப் இதைப் போல் தெரிகிறது:

<canvas id="myCanvas" width="200" height="100"></canvas>
குறிப்பு: எப்போதும் ஒரு id பண்புக்கூறைக் குறிப்பிடவும் (ஸ்கிரிப்டில் குறிப்பிடப்பட), மற்றும் கேன்வாஸின் அளவை வரையறுக்க width மற்றும் height பண்புக்கூறுகளைக் குறிப்பிடவும். எல்லையைச் சேர்க்க, style பண்புக்கூறைப் பயன்படுத்தவும்.

உதாரணம்

அடிப்படை, வெற்று கேன்வாஸின் உதாரணம்:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

JavaScript சேர்க்கவும்

செவ்வக கேன்வாஸ் பகுதியை உருவாக்கிய பிறகு, வரைவதற்கு நீங்கள் JavaScript சேர்க்க வேண்டும்.

⚙️ படிகள்:

  1. கேன்வாஸ் உறுப்பைப் பெறுங்கள்: document.getElementById()
  2. வரைவு சூழலைப் பெறுங்கள்: getContext("2d")
  3. வரைவு முறைகளைப் பயன்படுத்தவும்

ஒரு கோட்டை வரையவும்

உதாரணம்

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.moveTo(0, 0);
  ctx.lineTo(200, 100);
  ctx.stroke();
</script>

ஒரு வட்டத்தை வரையவும்

உதாரணம்

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(95, 50, 40, 0, 2 * Math.PI);
  ctx.stroke();
</script>

உரையை வரையவும்

உதாரணம்

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.font = "30px Arial";
  ctx.fillText("Hello World", 10, 50);
</script>

ஸ்ட்ரோக் உரை

உதாரணம்

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.font = "30px Arial";
  ctx.strokeText("Hello World", 10, 50);
</script>

fillText() vs strokeText()

  • fillText(): உரையை நிரப்புகிறது (திட நிறம்)
  • strokeText(): உரையின் வெளிவரையரையை வரைகிறது
  • fillText(): fillStyle மூலம் நிறத்தை அமைக்கலாம்
  • strokeText(): strokeStyle மூலம் நிறத்தை அமைக்கலாம்

நேரியல் கிரேடியண்டை வரையவும்

உதாரணம்

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

  // கிரேடியண்டை உருவாக்கவும்
  var grd = ctx.createLinearGradient(0, 0, 200, 0);
  grd.addColorStop(0, "red");
  grd.addColorStop(1, "white");

  // கிரேடியண்டுடன் நிரப்பவும்
  ctx.fillStyle = grd;
  ctx.fillRect(10, 10, 150, 80);
</script>

வட்ட கிரேடியண்டை வரையவும்

உதாரணம்

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

  // கிரேடியண்டை உருவாக்கவும்
  var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
  grd.addColorStop(0, "red");
  grd.addColorStop(1, "white");

  // கிரேடியண்டுடன் நிரப்பவும்
  ctx.fillStyle = grd;
  ctx.fillRect(10, 10, 150, 80);
</script>

படத்தை வரையவும்

உதாரணம்

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10);
</script>

HTML கேன்வாஸ் டுடோரியல்

<canvas> பற்றி மேலும் அறிய, எங்கள் HTML Canvas Tutorial ஐப் படிக்கவும்.

கேன்வாஸ் முறைகள்

  • fillRect() - செவ்வகத்தை நிரப்பு
  • strokeRect() - செவ்வக வெளிவரையரை
  • clearRect() - செவ்வகத்தை அழி
  • beginPath() - புதிய பாதையைத் தொடங்கு
  • closePath() - பாதையை மூடு

கேன்வாஸ் பண்புகள்

  • fillStyle - நிரப்பும் நிறம்
  • strokeStyle - வெளிவரையரை நிறம்
  • lineWidth - கோட்டின் அகலம்
  • font - உரை எழுத்துரு
  • textAlign - உரை சீரமைப்பு

💡 கேன்வாஸ் பயிற்சி

கீழே உள்ள கேன்வாஸில் நீங்கள் வரைய முயற்சிக்க விரும்பும் எதையும் வரையவும்: